<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="color: #000"
    >
      <template #right>
        <van-icon style="color: #000" name="ellipsis" />
      </template>
    </van-nav-bar>
    <div v-if="flag5">
      <div v-show="flag4" style="display: flex; justify-content: space-between">
        <span style="margin-left: 3vw">地址</span>
        <span style="margin-right: 3vw" @click="compile">编辑商品</span>
      </div>
      <div v-show="!flag4" style="display: flex; justify-content: flex-end">
        <span style="margin-right: 3vw" @click="compile">完成</span>
      </div>
    </div>
    <div
      v-if="flag"
      style="
        position: relative;
        text-align: center;
        line-height: 60px;
        width: 100vw;
      "
    >
      登录后可同步账户购物车中的商品
      <van-button
        @click="login"
        style="
          position: absolute;
          top: 17px;
          background-color: red;
          border-color: red;
        "
        type="primary"
        :round="flag"
        size="small"
        >登录</van-button
      >
    </div>
    <div
      v-if="flag1"
      style="
        position: relative;
        text-align: center;
        line-height: 60px;
        width: 100vw;
      "
    >
      您的购物车空空如也
      <van-button
        @click="search"
        style="
          position: absolute;
          top: 17px;
          background-color: red;
          border-color: red;
        "
        type="primary"
        :round="flag"
        size="small"
        >去购物吧</van-button
      >
    </div>
    <van-checkbox-group v-model="result" v-show="flag2" ref="checkboxGroup">
      <div
        style="display: flex"
        v-for="(v, index) in shoppingCatList"
        :key="index"
      >
        <van-checkbox
          :name="v.id"
          style="width: 10vw; margin-left: 3vw"
        ></van-checkbox>
        <van-card
          style="width: 70%"
          :num="v.num"
          :price="v.price"
          :title="v.title"
          :thumb="v.thumb"
        >
          <template #num>
            <van-stepper
              @change="modifyNumber(v.num, v.id)"
              v-model="v.num"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
        <div
          @click="deletOne(v.id)"
          style="
            width: 5vw;
            height: 5vw;
            margin-top: 11vw;
            border-radius: 50%;
            border: 1.5px solid grey;
            color: grey;
            font-weight: 600;
            line-height: 5vw;
            text-align: center;
            margin-left: 5vw;
          "
        >
          —
        </div>
      </div>
    </van-checkbox-group>
    <div
      v-if="flag5"
      style="
        position: fixed;
        bottom: 13.3vw;
        background-color: #fff;
        opacity: 0.8;
        width: 100vw;
        height: 13.3vw;
        display: flex;
        justify-content: space-around;
      "
    >
      <van-checkbox checked-color="#ee0a24" v-model="checked1" @click="checkAll"
        >全选</van-checkbox
      >
      <!-- 结算 -->
      <div
        v-show="flag4"
        style="height: 100%; line-height: 13.3vw; display: flex"
      >
        总计：￥<span>{{ totalprice }}</span
        >.00
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          style="margin-top: 0.7vw"
          round
          type="info"
          >去结算({{ numberCasesC }})件</van-button
        >
      </div>
      <!-- 编辑 -->
      <div
        v-show="!flag4"
        style="height: 100%; line-height: 13.3vw; display: flex"
      >
        <van-button
          style="
            margin: 2vw 2vw 0 2vw;
            background: #fff;
            color: #000;
            border: 1px solid #000;
          "
          round
          type="primary"
          size="small"
          >移至收藏</van-button
        >
        <van-button
          @click="deletAll"
          style="
            margin: 2vw 2vw 0 2vw;
            background: #fff;
            color: #000;
            border: 1px solid #000;
          "
          round
          type="primary"
          size="small"
          >删除</van-button
        >
      </div>
    </div>

    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >可能你还想要</van-divider
    >
    <MyWaterfall></MyWaterfall>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyFooter from "@/components/JH/homepage/MyFooter.vue";
import MyWaterfall from "@/components/JH/homepage/MyWaterfall.vue";
import axios from "axios";
export default {
  mounted() {
    //判断用户是否登录
    if (sessionStorage.getItem("token")) {
      //判断用户购物车是否为空
      axios({
        url: "http://localhost:3000/shopping",
        method: "get",
      }).then(
        (res) => {
          //当购物车不为空时,显示购物车数据组件
          if (res.data.length > 0) {
            this.flag2 = true;
            this.shoppingCatList = res.data;
            this.shoppingCatList.forEach((obj) => {
              this.totalprice += obj.num * obj.price;
              this.numberCasesC += obj.num;
            });
            this.flag4 = true;
            this.flag5 = true;
          } else {
            // 当购物车为空时，显示去购物组件
            this.flag1 = true;
            //隐藏地址与全选隐藏
            this.flag5 = false;
          }
          console.log();
        },
        (rej) => {}
      );
    } else {
      //未登录显示提示用户登录组件
      this.flag = true;
    }
  },
  data() {
    return {
      //登录提示组件开关
      flag: false,
      //去购物组件开关
      flag1: false,
      //购物车数据组件开关
      flag2: false,
      //全选开关
      flag3: true,
      //编辑商品开关
      flag4: false,
      //地址与全选开关
      flag5: false,
      //复选框 存储着商品id
      result: [],
      //全选
      checked1: false,
      //购物车列表
      shoppingCatList: [],

      refresh: "",

      radio: "1",

      //总价p
      totalprice: 0,
      //总件
      numberCasesC: 0,
    };
  },
  components: {
    MyFooter,
    MyWaterfall,
  },
  methods: {
    //返回上个页面
    onClickLeft() {
      //   Toast('返回');
      this.$router.back();
    },
    // 跳转登陆页面
    login() {
      this.$router.push("/LoginPage");
    },
    onClickRight() {},
    //跳转至搜索页面
    search() {
      this.$router.push("/Searchs");
    },
    //根据商品删除单个商品
    deletOne(id) {
      console.log(id);
      axios({
        url: "http://localhost:3000/shopping/" + id,
        method: "delete",
      }).then(
        (res) => {
          //删除成功后清除shoppingCatList里的数据
          this.totalprice = 0;
          this.numberCasesC = 0;
          for (let i = 0; i < this.shoppingCatList.length; i++) {
            if (this.shoppingCatList[i].id == id) {
              this.shoppingCatList.splice(i, 1);
              this.shoppingCatList.forEach((obj) => {
                this.totalprice += obj.num * obj.price;
                this.numberCasesC += obj.num;
              });
              break;
            }
          }
          //当购物车清空时隐藏地址与全选
          if (this.shoppingCatList.length == 0) {
            this.flag5 = false;
            this.flag1 = true;
          }
        },
        (rej) => {
          console.log(rej);
        }
      );
    },
    //根据多个商品id删除
    deletAll() {
      console.log(this.result);
      //删除数据库数据
      for (let i = 0; i < this.result.length; i++) {
        axios({
          url: "http://localhost:3000/shopping/" + this.result[i],
          method: "DELETE",
        }).then(
          (res) => {
            console.log(111);
            console.log(res);
          },
          (rej) => {
            console.log(rej);
          }
        );
      }
      //删除data数据
      this.result; //存对象id的数组
      this.shoppingCatList; // 存对象的数组
      this.shoppingCatList = this.shoppingCatList.filter((obj) => {
        for (let i = 0; i < this.result.length; i++) {
          if (this.result[i] == obj.id) return false;
        }
        return true;
      });
      //当购物车清空时隐藏地址与全选
      if (this.shoppingCatList.length == 0) {
        this.flag5 = false;
        this.flag1 = true;
      }
      
    },
    //修改购物车某个商品的数量
    modifyNumber(num, id) {
      axios({
        url: "http://localhost:3000/shopping/" + id,
        method: "patch",
        data: {
          num: num,
        },
      }).then(
        (res) => {
          console.log(res);
          this.shoppingCatList.forEach((obj) => {
            if (obj.id == id) {
              obj.num = num;
              this.totalprice = 0;
              this.numberCasesC = 0;
              this.shoppingCatList.forEach((obj) => {
                this.totalprice += obj.num * obj.price;
                this.numberCasesC += obj.num;
              });
            }
          });
        },
        (rej) => {
          console.log(rej);
        }
      );
    },

    //全选
    checkAll() {
      if (this.flag3) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
      this.flag3 = !this.flag3;
    },
    //编辑/完成显示隐藏
    compile() {
      this.flag4 = !this.flag4;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>